<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col section_1">
        <view class="justify-between">
          <text class="text_1">{{detail.issueTypeName}}</text>
          <text class="text_2">{{detail.rectificationStatus}}</text>
        </view>
        <text class="text_3">巡检员：{{detail.issueUserName}}</text>
        <text class="text_4">{{detail.issueContent}}</text>
        <view class="u-flex-row u-flex-wrap image-wrapper"  >
          <image v-for="(it, i) in detail.issueMedia"  @click="previewImage(detail.issueMedia,i)"
            :src="it"
            class="image_4"
          />
        <!--  <image
          :src="imgUrl+'16557867901398396466.png'"
            class="image_1"
          /> -->
        </view>
        <text class="text_5">巡检日期：{{detail.insertTime}}</text>
		
		<view class="" v-if="detail.comments && detail.comments.length>0">
			<view class="flex-col section_2" v-for="(item,index) in detail.comments" :key="index" >
			  <view class="flex-row">
			    <text class="text_6">{{item.userName}}</text>
			    <view class="flex-col items-center text-wrapper"><text class="text_7">{{item.userRoleName==104?'工长':'巡检'}}</text></view>
			  </view>
			  <text class="text_8">{{item.responseContent}}</text>
			  <view class="flex-row equal-division">
			   
			    <image v-for="(image, i) in item.responseImg" :key="i"
			      :src="image"
			      class="equal-division-item"  @click="previewImage(item.responseImg,i)"
			    />
			  </view>
			  <text class="text_9">{{item.responseTime}}</text>
			</view>
		</view>
        
      </view>
    </view>
  </view>
</template>

<script>
	import tools from "@/shop/utils/tools.js"
	export default {
		components: {},
		created() {
			// this.getPoster();
		},
		onLoad(option) {
			if(option.issueId)
			{
				this.init(option.issueId);
			}else{
				this.$u.toast('参数有误');
				return ;
			}
		},
		data() {
			return {
				video:{ //存放视频数组
					url: 'http://localhost:9999/h5/static/video/1.mp4',
					poster: '',
				},
				imgUrl:this.$IMG_URL,
				detail:{},
				// imgArr: [], 
				imageList: [ //存放图片数组
					'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868046506397490.png',
					'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868046562320861.png',
					'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868050538000880.png',
				],
			};
		},
		methods: {
			init(issueId)
			{
			  this.$http('check.queryIssueDetails',{
				
					  issueId:issueId
				
			  }).then(r=>{
				  if(r.code==200)
				  {
					  this.detail=r.data;
					  this.detail.issueMedia=this.detail.issueMedia.split(',');
					  if( this.detail.comments)
					  {
						this.detail.comments.forEach(item=>{
							if(item.responseImg)
							{
							item.responseImg=item.responseImg.split(',');	
							}else{
								item.responseImg=[];
							}
						})
					  }
					
					  console.log(this.detail);
				  }
			  });	
			},
			// 预览图片
			previewImage(img,i) {
				uni.previewImage({
					urls: img,
					current: i,
					success: function(data) {},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			},
			async getPoster() {
				this.video.poster = await tools.getVideoBase64(this.video.url)
			},
			goVideo() {
				uni.navigateTo({
					url: "/pages/video/video?url=" + this.video.url
				})
			},

		}
	};
</script>

<style scoped lang="scss">
  .equal-division-item {
    margin-left: 10rpx;
    flex: 1 1 188rpx;
    border-radius: 16rpx;
    width: 188rpx;
    height: 188rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
  }
  .group {
    padding: 20rpx 0 106rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_1 {
    margin: 0 24rpx;
    padding: 29rpx 23rpx 38rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text_3 {
    margin-top: 24rpx;
    align-self: flex-start;
    color: #666666;
    font-size: 26rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 30rpx;
  }
  .text_4 {
    margin-top: 31rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_5 {
    margin-left: 8rpx;
    margin-top: 27rpx;
    align-self: flex-start;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .section_2 {
    margin-top: 34rpx;
    padding: 34rpx 24rpx 25rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868046370654719.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .text_1 {
    color: #191919;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_2 {
    margin-top: 4rpx;
    color: #1d6aff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_8 {
    margin-top: 25rpx;
    align-self: flex-start;
    color: #1d6aff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .equal-division {
  
    margin-top: 24rpx;
  }
  .text_9 {
    margin-top: 19rpx;
    align-self: flex-start;
    color: #666666;
    font-size: 22rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 26rpx;
  }
  .text_6 {
    margin-bottom: 5rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text-wrapper {
    margin-left: 15rpx;
 
  
    border-radius: 16rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868046478494454.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 58rpx;
    height: 32rpx;
  }
  .text_7 {
    color: #1d6aff;
    font-size: 18rpx;
   
  }
  .image-wrapper {
    margin-top: 33rpx;
    border-radius: 16rpx;
    position: relative;
  }
  .image_4 {
    border-radius: 16rpx;
    width: 31%;
    height: 216rpx;
	margin-left: 10rpx;
  }
  .image_1 {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .image_2 {
    margin-left: 0;
  }
</style>